.loading-icon {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 40px;
  justify-content: center;
  align-items: center;
}

.loading-outside {
  --w: 20vw;
  --i: 9vw;
  --b: 9.5vw;
  width: var(--w);
  height: var(--w);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  &::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-image: conic-gradient(
      red,
      green,
      yellowgreen,
      yellow,
      orange,
      red
    );
    -webkit-mask-image: radial-gradient(
      transparent 0,
      transparent var(--i),
      #000 var(--b)
    );
    animation: loading 15s linear infinite alternate;
  }
  &::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-image: conic-gradient(transparent 0%, #fff 10%, transparent 20%);
    -webkit-mask-image: radial-gradient(
      transparent 0,
      transparent var(--i),
      #000 var(--b)
    );
    animation: loading 1.5s infinite;
  }
}

@keyframes loading {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
